<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>订单信息-豆瓣集市</title>
	<style type="text/css">
		.center{
			width:957px;
			height: 635px;
			margin:0 auto;
			margin-top:3px;
			float:center;
		}
		.top{
			height: 25px;
			width:955;
			float:left;
		}
		.top img{
			line-height:25px;
		}
		.bt{
			width:955px;
			height:22px;
			float:left;
			margin:10px 0;
			color:gray;
		}
		.btt{
			height: 20px;
			width:100%;
			float:left;
			font-size:12px;
		}
		.address{
			height: 222px;
			width:100%;
			float:left;
		}
		.address input{
			border-radius:1px;
		}
		.address select{
			border-radius:1px;
		}
		.send{
			width:100%;
			height: 110px;
			background:#F8F8F8;
			float:left;
			margin-top:10px;
			font-size:12px;
		}
		.good{
			width: 100%;
			height:;
			float:left;
			margin-top: 5px;
		}
		.lo{
			float:left;
			margin-top:5px;
			color:gray;
			height: 25px;
			font-size:14px;
		}
		.z{
			width:100%;
			float: left;
			margin-top:5px;
			background: #E9E9E9;
			font-size:12px;
		}
		.q{
			float:right;
		}
		.s{
			float: left;
			font-size:16px;
		}
		.ds{
			background: #E9E9E9;
			width: 100%;
			height: 50px;
			position: fixed;
			bottom: 0;
		}
		.a{
			font-size:14px;
		}
	</style>
</head>
<body>

<!--导入插件-->
<form role="form" id="forms" action="{{url('/home/dingdan/insert')}}" method="post" enctype="multipart/form-data">
	
	<div class="center">

		<div class="top">
			<img src="/Images/lg.png" alt="">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<img src="/Images/jd.png" alt="">
		</div>

		<div class="bt">
			<b>确认收货地址{{ $uid }}</b>
		</div>

		<div class="btt">
			收货人信息
		</div>
		<div class="address">
			<div style="color:red;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp*为必填偶~~</div>
			收货人ID号&nbsp&nbsp*&nbsp&nbsp <input type="text" name="gname"><br><br>
            <div class="province-list select" >
                <option value="" class="form-content">
                    <script type="text/javascript" src="/js/jquery.js"></script>
                    <script type="text/javascript" src="/js/area.js"></script>
                    <script type="text/javascript" src="/js/location.js"></script>
                    <!--层级联动选择框-->
                    &nbsp&nbsp&nbsp&nbsp所在地区&nbsp&nbsp*&nbsp&nbsp<select id="loc_province" class="" name="sheng" style="width:80px;"></select>
                    <select id="loc_city" class="" name="shi" style="width:100px;"></select>
                    <select id="loc_town" class="" name="xian" style="width:120px;"></select>
                </option>
            </div><br>
			&nbsp&nbsp&nbsp&nbsp详细地址&nbsp&nbsp*&nbsp&nbsp<input type="text" name="dz"><br><br>
			&nbsp&nbsp&nbsp&nbsp手机号码&nbsp&nbsp*&nbsp&nbsp<input type="text" name="phone"><br><br>
		</div>
		<div class="send">

			&nbsp物流信息<br><br>
			&nbsp&nbsp&nbsp付款方式 : <input type="radio" name="payment" value="zx" checked>在线支付 <input type="radio" name="payment" value="hd">货到付款<br><br>

			&nbsp&nbsp&nbsp配送方式 : <input type="radio" name="send" value="st" checked>申通快递<input type="radio" name="send" value="yt">圆通快递<input type="radio" name="send" value="jd">京东快递
		</div>
		<div class="good">
			<div style="color:gray;">确认商品清单</div>
			<input type="hidden" name="uid" value="{{ $uid }}">
            <input type="hidden" name="gid" value="{{$gid}}">
            <input type="hidden" name="price" value="{{$price}}">
			<input type="hidden" name="payment" value="{{$price * $num}}">
			<table style="width:100%;height:20px;margin:0 auto;margin-top:10px">
				<tr>
				   <td>商品名</td>
				   <td>单价</td>
				   <td>数量</td>
				   <td>金额</td>
				</tr>
				<tr class="dd">
					<td>{{$gname}}</td>
					<td class="dj">{{$price}}</td>
					<td> 
					  <input type="button" value="-" class="minus">
				      <input type="text" step="1" min="1m5" name="inum" value=" {{$num}} " title="Qty" class="input-text qty text" style="width:20px;">
				      <input type="button" value="+" class="plus">
        			</td>
					<td>{{$price * $num}} </td>
					
				</tr>
			</table>

		</div>
		<div class="lo">
			<img src="/Images/sq.png" alt="">&nbsp&nbsp&nbsp<a href="#" style="color:gray;text-decoration:none;">更多</a>
		</div>
		<div class="z">
			&nbsp&nbsp※ 如需开具发票请联系店铺客服<br><br>
			<div class="q">
				<span>运费￥:10:00</span>
				&nbsp&nbsp<span>优惠券返现-￥0.00</span>
				&nbsp&nbsp<span>店铺返现:￥0.00</span>
				&nbsp&nbsp<span>店铺总计:￥{{$price * $num}}</span>
			</div>
		</div>
		<div class="a">
			<a href="#" style="color:gray;text-decoration:none;float:left;margin-top:5px;"><返回购物车</a>
		</div><br><br><br><br>
		<div style="height: 50px;">
			
		</div>
	</div>
	<div style="height: 100px;">
		
	</div>
	<div class="ds">
		<span style="color:gray; line-height:50px;">
			&nbsp&nbsp<span>订单总额:￥{{$price * $num}}</span>
			&nbsp&nbsp<span>运费:￥10.00</span>
			&nbsp&nbsp<span>优惠金额:-￥00</span>
		</span>
		<div style="float:right; font-size:16px;">
			购买数量<span style="color:red;">1</span><span>应付总额:{{$price * $num}}<span style="color:red;">￥</span>&nbsp&nbsp<button class="btn btn-primary" type="submint" style="margin-right:50px; background-color:gerrn; height:40px;color:green;">提交订单</button></span>
		</div>
	</div>
	{{csrf_field()}}
</form>
<!-- 地址的js -->
<script type="text/javascript">
	$(document).ready(function() {
    	showLocation();
    $('#addresses .attr').each(function(){
        var str = $(this).attr('attr');
        var info = getInfo(str);
        $(this).html(info);
    });

    //定义获取城市信息方法
    function getInfo(str){
        //console.log(str);
        //拆分字符串
        var arr = str.split(',');
        // console.log(arr);    
        var ls  = new Location;
        var l = ls.items;
        // console.log(l['0,1,2']['5']);
        var sheng = l['0'][arr[0]];
        var shi = l['0,'+arr[0]][arr[1]];
        var xian = l['0,'+arr[0]+','+arr[1]][arr[2]];
        // return sheng+shi+xian;
        return [sheng,shi,xian];
    }

    $('#forms').submit(function(){
        var sheng = $('select[name=sheng]').val();
        var shi = $('select[name=shi]').val();
        var xian = $('select[name=xian]').val();
        var s = sheng+','+shi+','+xian;
        var v = getInfo(s);
        // console.log(v);
        for (var i = 0; i < v.length; i++) {
            var inpu = $('<input type="hidden" name="'+i+'" value="'+v[i]+'" />');
            $('#forms').append(inpu);
        };
        // return false;
    }) 
});
</script>
<!-- 地址的js结束 -->


<!-- -+的js -->
<script type="text/javascript">
  // alert($);
  $('.plus').click(function(){
    //获取当前数量
    // alert(222);
    var num = parseInt($('input[title=Qty]').val());
    // alert(num);
    var dd=$(this).parents('.dd').find('.dj').html();
    // alert(dd);
    num = num+1;
    // alert(num);
    // console.log(num);
    //修改属性
   var zj=dd*num+10.00;
    $('input[title=Qty]').val(num);
    $(this).parent().next().html(zj);
    // alert(num);
  });
  $('.minus').click(function(){
    //获取当前数量
    var num = parseInt($('input[title=Qty]').val());

    var dd=$(this).parents('.dd').find('.dj').html();
    
    if(num == 1) {
    	num=1;
    }else{
    	num = num-1;
    }

    var zj=dd*num+10;
    console.log(zj,num,dd);
    // alert(zj);
    //修改属性
    $('input[title=Qty]').val(num);
    $(this).parent().next().html(zj);
  })

    // 单机事件 加入购物车
    $('.addCart').click(function(){
    // 
      // 获取参数
      // alert(222);
      var id = $('.quantity').find('input[name=id]').val();
      var num = $('.quantity').find('input[name=num]').val();
      // console.log(id,num);
      $.ajaxSetup({
        headers:{
          'X-CSRF-TOEN':$('meta[name="csrf-token"]').attr('content')
        }
      });
      // 发送ajax
	  $.post('/home/car/che',{id:id,num:num},function(data){
	    // console.log(data);
	    if(data == 1){
	        alert('加入购物车成功');
	    }else{
	      alert('加入购物车失败');
	    }
      })
    })
</script>
<!-- -+的js结束 -->
</body>
</html>